import React, {Component} from 'react';
import {
    StyleSheet,
    AppRegistry,
    Image,
    View,
    Text,
    Dimensions,
    ListView,
    TouchableHighlight,
    FlatList,
    TouchableOpacity,
} from 'react-native';
import {
    TabNavigator,
    StackNavigator
} from 'react-navigation';
// import Shou from '../index.android';
import Guan1 from './xueshuguan';
import Guan2 from './cangpinguan';
import Guan3 from './zhanlanguan';
import Guan4 from './shitingguan';
import Guan5 from './jiaoyuguan';
import Guan6 from './youxiguan';
import Guan7 from './wenchuangguan';
import Guan8 from './tushuguan';
import Guan9 from './xinwenguan';
import Guan10 from './daoshangguan';
import Guan11 from './gujianguan';
import test  from './test';
import Detal  from './actDetal';
var {height, width} = Dimensions.get('window');

 class Start extends Component {
    constructor(props) {
        super(props);
        this._renderItem = this._renderItem.bind(this); 
        navigation = props.navigation; 
        this.state = {
            dataSource:[
                {'id':1,'name':"学术馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':2,'name':"藏品馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':3,'name':"展览馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':4,'name':"试听馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':5,'name':"教育馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':6,'name':"游戏馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':7,'name':"文创馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':8,'name':"图书馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':9,'name':"新闻馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':10,'name':"导赏馆",'jianjie':"关于故宫学术的内容汇聚于此"},
                {'id':11,'name':"古建馆",'jianjie':"关于故宫学术的内容汇聚于此"}
            ]
        };
      }

    // static navigationOptions=({navigation}) => ({
    //     headerTitle: '紫薇城',
    //     headerTitleStyle:{
    //         alignSelf:'center',
    //         // width:width
    //     },
    //     headerTintColor:'burlywood',
        
    //   });
      _keyExtractor = (item, index) => item.id;
  _renderItem({item,index}){
    const { navigate } = this.props.navigation;
      return(
        <TouchableOpacity onPress={() => navigate('Profile'+item.id)} activeOpacity={0.3}>
        <View style={{width:width*0.9,height:height*0.2,paddingTop:10,flex: 1, flexDirection: 'row',justifyContent: 'center',alignSelf:'center',marginBottom:10}}>
            <View style={{width:width*0.6,height:height*0.2,}}>
            <Image style={{backgroundColor:'gray',width:width*0.6,height:height*0.2}} source={require("./img/ic_ancient.png")}></Image>
            </View>
            <View style={{backgroundColor:'#CCCCCC',width:width*0.3,height:height*0.2,flex:1,flexDirection:'column',justifyContent:'flex-start',paddingLeft:10,paddingTop:height*0.2*0.2}}>
            <Text style={{fontWeight:'bold'}}> {item.name}!</Text>
            <Text style={{paddingTop:10,fontSize:12}}> {item.jianjie}!</Text>
            </View>
        </View>
        </TouchableOpacity>
      )
  };
render() {      
        return (
             <FlatList 
             data={this.state.dataSource}
             keyExtractor={this._keyExtractor}
             renderItem={this._renderItem.bind(this)}>
             </FlatList>
             
         )
     }
}
export default Guan = StackNavigator({
    Home: { screen: Start,
      navigationOptions:{
        // header:null
        headerTitle: '紫薇城',
        headerTitleStyle:{
            alignSelf:'center',
                // width:width
            },
        headerTintColor:'burlywood',
      } },
    Profile1: {screen: Guan1,
        navigationOptions:{
            // header:null
            headerTitle: '学术馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
          }},
    Profile2: {screen: Guan2,
        navigationOptions:{
            // header:null
            headerTitle: '藏品馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
          }},
    Profile3: {screen: Guan3,
    navigationOptions:{
        // header:null
        headerTitle: '展览馆',
        headerTitleStyle:{
            alignSelf:'center',
                // width:width
            },
        headerTintColor:'burlywood',
        }},
    Profile4: {screen: Guan4,
        navigationOptions:{
            // header:null
            headerTitle: '试听馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
            }},
    Profile5: {screen: Guan5,
        navigationOptions:{
            // header:null
            headerTitle: '教育馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
            }},
    Profile6: {screen: Guan6,
        navigationOptions:{
            // header:null
            headerTitle: '游戏馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
            }},
    Profile7: {screen: Guan7,
        navigationOptions:{
            // header:null
            headerTitle: '文创馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
            }},
    Profile8: {screen: Guan8,
        navigationOptions:{
            // header:null
            headerTitle: '图书馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
            }},
    Profile9: {screen: Guan9,
        navigationOptions:{
            // header:null
            headerTitle: '新闻馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
            }},
    Profile10: {screen: Guan10,
        navigationOptions:{
            // header:null
            headerTitle: '导赏馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
            }},
    Profile11: {screen: Guan11,
        navigationOptions:{
            // header:null
            headerTitle: '古建馆',
            headerTitleStyle:{
                alignSelf:'center',
                    // width:width
                },
            headerTintColor:'burlywood',
            }},
    ProfileD: {screen: Detal},
  
  });
const styles = StyleSheet.create({

})



